<script setup lang="ts">
import { toRef, reactive, toRefs, toRaw } from "vue";

const info = reactive({ name: "张三", age: 18, like: "JK" });

// toRef：将某个响应式值（或者响应式对象的某个属性）变成 ref
// 只能修改响应式对象的值，非响应式对象的值没有用
const like = toRef(info, "like");

// toRefs: 将响应式对象所有属性变成 ref
const info1 = toRefs(info);

// toRaw：将响应式变成原始
const infoRaw = toRaw(info);

const changeLike = () => {
  like.value = "洛丽塔";
};

const changeInfo1 = () => {
  info1.name.value = "李四";
  info1.age.value = 20;
  info1.like.value = "黑丝";
};

const changeInfoRaw = () => {
  infoRaw.like = "白丝";
  console.log(info, infoRaw);
};
</script>

<template>
  <div>info: {{ info }}</div>
  <hr />
  <div>
    like(from toRef(info, 'like')): {{ like }}
    <button @click="changeLike">修改</button>
  </div>
  <hr />
  <div>
    info1(toRefs(info)): {{ info1 }} <button @click="changeInfo1">修改</button>
  </div>
  <hr />
  <div>
    infoRaw(toRaw(info)): {{ infoRaw }}
    <button @click="changeInfoRaw">修改</button>
  </div>
</template>

<style scoped></style>
